<template>
  <div class="editPage" v-if="userInfo">
    <img src="@/assets/phoneTop.jpg" alt class="phoneTop" />

    <topBars msg="编辑资料" />

    <div class="avatarBox">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
        alt
        class="avatar"
      />
      <img v-else src="@/assets/logo.png" alt class="avatar" />
      <van-uploader :after-read="afterRead" />
    </div>

    <div class="title">基本资料</div>

    <navBars lebal="昵称" :detail="userInfo.nickname" @barsClick="showNickname=true" />

    <navBars lebal="密码" detail="••••••" @barsClick="showPassword=true" />

    <navBars lebal="性别" :detail="userInfo.gender===1?'男':'女'" @barsClick="showGender=true" />

    <!-- 组件调用弹出框(昵称) -->
    <van-dialog
      v-model="showNickname"
      title="修改昵称"
      show-cancel-button
      @confirm="editUserInfo({nickname: newNickname})"
      :close-on-click-overlay="true"
    >
      <van-cell-group>
        <van-field v-model="newNickname" placeholder="修改昵称 请输入5～8位字符的新昵称" />
      </van-cell-group>
    </van-dialog>

    <!-- 组件调用弹出框(密码) -->
    <van-dialog
      v-model="showPassword"
      title="修改密码"
      show-cancel-button
      @confirm="editUserInfo({password: newPassword})"
      :close-on-click-overlay="true"
    >
      <van-cell-group>
        <van-field v-model="newPassword" placeholder="修改密码 请输入3～9位字符的新密码" type="password" />
      </van-cell-group>
    </van-dialog>

    <!-- 组件调用动作面板(性别) -->
    <van-action-sheet
      v-model="showGender"
      :actions="genders"
      cancel-text="取消"
      title="修改性别"
      close-on-click-action
      @select="setGender"
      close-icon
    />
  </div>
</template>

<script>
import topBars from "@/components/TopBars";
import navBars from "@/components/NavBars";

export default {
  data() {
    return {
      userInfo: "",
      showNickname: false,
      showPassword: false,
      newNickname: "",
      newPassword: "",
      showGender: false,
      genders: [
        { name: "男", color: "#66b4ea", className: "male", gender: 1 },
        { name: "女", color: "#fb8384", className: "female", gender: 0 }
      ]
    };
  },
  components: {
    topBars,
    navBars
  },
  created() {
    this.loadPage();
  },
  methods: {
    // 将创建钩子函数封装到下面函数中，以便在点击确定修改信息后引入更加便捷
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId")
      }).then(res => {
        console.log("用户详情接口返回结果", res);
        this.userInfo = res.data.data;
      });
    },
    // 封装发送编辑用户信息的请求
    editUserInfo(userData) {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "POST",
        data: userData
      }).then(res => {
        // console.log(res);
        const { message } = res.data;
        console.log(message);

        for (let key in userData) {
          if (message === "修改成功" && key === "nickname") {
            this.$toast.success("昵称修改成功");
          }

          if (message === "修改成功" && key === "password") {
            this.$toast.success("密码修改成功");
          }

          if (message === "修改成功" && key === "gender") {
            this.$toast.success("性别修改成功");
          }
        }

        this.loadPage();
      });
    },
    setGender(item) {
      // console.log(item.name);
      const obj = {
        gender: item.gender
      };

      this.editUserInfo(obj);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);

      let formdata = new FormData();

      formdata.append("file", file.file);

      // 发送请求上传图片
      this.$axios({
        url: "/upload",
        method: "POST",
        data: formdata
      }).then(res => {
        // console.log("上传图片后返回结果",res);
        // 返回结果中，res.data.data.url是我们需要发送请求的参数，以便刷新页面渲染新数据
        const { message,data } = res.data;

        if(message==="文件上传成功"){
          // 发送编辑用户信息的请求，重新刷新页面
          this.editUserInfo({ head_img : data.url })
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.phoneTop {
  width: 100%;
}

.avatarBox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38.889vw;
  position: relative;

  .avatar {
    width: 19.444vw;
    height: 19.444vw;
    border-radius: 50%;
  }

  .van-uploader {
    position: absolute;
    opacity: 0;
  }
}

.title {
  height: 13.889vw;
  background-color: #f5f6f7;
  line-height: 13.889vw;
  font-size: 3.889vw;
  font-weight: 600;
  color: #8f8f91;
  padding-left: 5.556vw;
}

/deep/ .van-field__control {
  text-indent: 3.889vw;
}

/deep/ .van-dialog__header {
  font-weight: 700;
  padding-bottom: 2.222vw;
  font-size: 5vw;
}

/deep/ .van-dialog__footer--buttons {
  font-weight: 700;
}

/deep/ .van-action-sheet__header,
.van-action-sheet__cancel {
  font-weight: 700;
}

/deep/ .van-action-sheet__header {
  font-size: 5vw;
  padding: 2.222vw 0;
}

.male,
.female {
  font-weight: 700;
}
</style>